<template>
  <el-table
    v-bind="$attrs"
    v-on="$listeners"
    ref="multipleTable"
    :key="key"
    v-loading="loading"
    :data="tableData"
    @cell-dblclick="cellDblclick"
  >
    <hu-table-column
      v-bind="item"
      v-for="item in bindTableCol"
      :key="item.prop"
      @cellDblclick="cellDblclick"
      :item="item"
      slot=""
    >
      <template v-if="item.slot" v-slot:[item.slot]="{ row, column, $index }">
        <slot
          :name="item.slot"
          :$index="$index"
          :row="row"
          :column="column"
        ></slot>
      </template>
    </hu-table-column>
  </el-table>
</template>

<script>
import huTableColumn from "./huTableColumn.vue";
export default {
  name: "HuTable",
  components: {
    huTableColumn,
  },
  props: {
    // 生成 el-table-column
    tableCol: {
      type: Array,
      default: () => [],
    },
    // 显示的数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 表格 loading
    loading: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // 兼容之前的属性
    bindTableCol() {
      function processColumn(item, device) {
        // 处理每个列对象，创建一个新对象并复制原对象属性
        let processedItem = {
          ...item,
          // 兼容之前属性
          prop: item.slot || item.key || item.type,
          label: item.label || item.title,
          // 修改默认值
          align: item.align || "center",
          fixed: device === "desktop" ? item.fixed : false,
          "show-overflow-tooltip": !(item.showOverflowTooltip === false),
          "min-width": item.minWidth || item["min-width"] || 130,
        };
        // 如果存在子列，递归处理子列
        if (item.children) {
          processedItem.children = item.children.map((child) =>
            processColumn(child, device)
          );
        }
        return processedItem;
      }
      return this.tableCol.map((item) => processColumn(item, this.device));
    },
    device() {
      return this.$store.getters.device;
    },
  },
  data() {
    return {
      key: Math.random(),
    };
  },
  methods: {
    // 双击单元格触发事件
    cellDblclick(row, column, cell, event) {
      // 避免点击过快导致多个输入框处于焦点状态
      // row[column.property + "Show"] = false;
      // 避免点击其他单元格导致表格刷新
      // if (!['address'].includes(column.property)) return
      // row[column.property + "Show"] = true;
      this.updateTable();
      this.$emit("cell-dblclick", row, column, cell, event);
    },
    // 清除 单元格选择
    resetShow(row, column) {
      setTimeout(() => {
        row[column.property + "Show"] = false;
        this.updateTable();
      }, 100);
    },
    //更新表格
    updateTable() {
      this.key = Math.random();
    },
    // 外部调用 校验方法
    verifyTable() {
      let verifyCol = this.bindTableCol.filter((e) => e.required);
      let soul = {
        state: false,
        message: "",
      };
      this.tableData.forEach((element) => {
        verifyCol.forEach((col, index) => {
          if (!element[col.slot] && element[col.slot] !== 0) {
            soul.state = true;
            soul.message =
              soul.message + `第${1 + index}行，${col.label}不能为空；`;
          }
        });
      });
      if (!this.tableData.length && verifyCol.length) {
        soul.state = true;
        soul.message = "表格未填写";
      }
      if (soul.state) {
        if (soul.message.length > 1000) {
          soul.message = soul.message.substring(0, 1000) + "......";
        }
        this.$modal.msgWarning(soul.message);
      }
      return soul.state;
    },
  },
};
</script>

<style scoped></style>
